/**
* 功能描述: 通知提醒框demo
* @author 崔孝楠
* @date 2022/10/6 22:53
* @version 1.0
*/
<template>
  <div>
    <!-- 右上 -->
    <div class="yw-notification yw-notification-topRight">
      <!-- 不带图标 -->
      <div class="yw-notification-notice">
        <div class="yw-notification-notice-content">
          <!-- 通知标题 -->
          <div class="yw-notification-notice-message">
            Notification Title
          </div>
          <!-- 通知详情 -->
          <div class="yw-notification-notice-description">
            I will never close automatically. I will be close automatically. I will never close automatically.
          </div>
        </div>
        <!-- 关闭图标 -->
        <button class="yw-notification-notice-close">
          <svg class="yw-notification-close-icon" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
            <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
          </svg>
        </button>
      </div>

      <!-- info 图标 -->
      <div class="yw-notification-notice">
        <div class="yw-notification-notice-content yw-notification-notice-with-icon">
          <!-- 提醒图标 -->
          <span class="yw-notification-notice-icon-info">
            <svg class="yw-notification-notice-icon" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path>
            </svg>
          </span>
          <!-- 通知标题 -->
          <div class="yw-notification-notice-message">
            Notification Title
          </div>
          <!-- 通知详情 -->
          <div class="yw-notification-notice-description">
            I will never close automatically. I will be close automatically. I will never close automatically.
          </div>
        </div>
        <!-- 关闭图标 -->
        <button class="yw-notification-notice-close">
          <svg class="yw-notification-close-icon" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
            <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
          </svg>
        </button>
      </div>

      <!-- success 图标 -->
      <div class="yw-notification-notice">
        <div class="yw-notification-notice-content yw-notification-notice-with-icon">
          <!-- 提醒图标 -->
          <span class="yw-notification-notice-icon-success">
            <svg class="yw-notification-notice-icon" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
            </svg>
          </span>
          <!-- 通知标题 -->
          <div class="yw-notification-notice-message">
            Notification Title
          </div>
          <!-- 通知详情 -->
          <div class="yw-notification-notice-description">
            I will never close automatically. I will be close automatically. I will never close automatically.
          </div>
        </div>
        <!-- 关闭图标 -->
        <button class="yw-notification-notice-close">
          <svg class="yw-notification-close-icon" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
            <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
          </svg>
        </button>
      </div>

      <!-- warning 图标 -->
      <div class="yw-notification-notice">
        <div class="yw-notification-notice-content yw-notification-notice-with-icon">
          <!-- 提醒图标 -->
          <span class="yw-notification-notice-icon-warning">
            <svg class="yw-notification-notice-icon" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path>
            </svg>
          </span>
          <!-- 通知标题 -->
          <div class="yw-notification-notice-message">
            Notification Title
          </div>
          <!-- 通知详情 -->
          <div class="yw-notification-notice-description">
            I will never close automatically. I will be close automatically. I will never close automatically.
          </div>
        </div>
        <!-- 关闭图标 -->
        <button class="yw-notification-notice-close">
          <svg class="yw-notification-close-icon" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
            <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
          </svg>
        </button>
      </div>

      <!-- error 图标 -->
      <div class="yw-notification-notice">
        <div class="yw-notification-notice-content yw-notification-notice-with-icon">
          <!-- 提醒图标 -->
          <span class="yw-notification-notice-icon-error">
            <svg class="yw-notification-notice-icon" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
              <path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
            </svg>
          </span>
          <!-- 通知标题 -->
          <div class="yw-notification-notice-message">
            Notification Title
          </div>
          <!-- 通知详情 -->
          <div class="yw-notification-notice-description">
            I will never close automatically. I will be close automatically. I will never close automatically.
          </div>
        </div>
        <!-- 关闭图标 -->
        <button class="yw-notification-notice-close">
          <svg class="yw-notification-close-icon" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
            <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
          </svg>
        </button>
      </div>
    </div>

    <!-- 左上 -->
    <div class="yw-notification yw-notification-topLeft">
      <div class="yw-notification-notice">
        <div class="yw-notification-notice-content">
          <!-- 通知标题 -->
          <div class="yw-notification-notice-message">
            Notification Title
          </div>
          <!-- 通知详情 -->
          <div class="yw-notification-notice-description">
            I will never close automatically. I will be close automatically. I will never close automatically.
          </div>
        </div>
        <!-- 关闭图标 -->
        <button class="yw-notification-notice-close">
          <svg class="yw-notification-close-icon" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
            <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
          </svg>
        </button>
      </div>
    </div>

    <!-- 右下 -->
    <div class="yw-notification yw-notification-bottomRight">
      <div class="yw-notification-notice">
        <div class="yw-notification-notice-content">
          <!-- 通知标题 -->
          <div class="yw-notification-notice-message">
            Notification Title
          </div>
          <!-- 通知详情 -->
          <div class="yw-notification-notice-description">
            I will never close automatically. I will be close automatically. I will never close automatically.
          </div>
        </div>
        <!-- 关闭图标 -->
        <button class="yw-notification-notice-close">
          <svg class="yw-notification-close-icon" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
            <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
          </svg>
        </button>
      </div>
    </div>

    <!-- 左下 -->
    <div class="yw-notification yw-notification-bottomLeft">
      <div class="yw-notification-notice">
        <div class="yw-notification-notice-content">
          <!-- 通知标题 -->
          <div class="yw-notification-notice-message">
            Notification Title
          </div>
          <!-- 通知详情 -->
          <div class="yw-notification-notice-description">
            I will never close automatically. I will be close automatically. I will never close automatically.
          </div>
        </div>
        <!-- 关闭图标 -->
        <button class="yw-notification-notice-close">
          <svg class="yw-notification-close-icon" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
            <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>

</style>
